<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
      'box-sizing': 'border-box',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>

      <view class="text">{{ title || "内容详情" }}</view>
      <view class="head_right">
        <collect
          :flag="type"
          :isShow="data.is_collect == 0 ? false : true"
          :collectType="collectType"
          :id="Number(currentId)"
          :user_id="user_id"
          :detailType="detailType"
          @updateDetail="updateDetail"
        >
        </collect>
      </view>
    </view>

    <view class="top" :style="{ marginTop: statusBarHeight + 'px' }">
      <view class="title">
        <view class="title_left">
          <!-- 头像 -->
          <image
            :src="data.user.avatar_url"
            v-if="data.user"
            @click.stop="goHome(data.user.user_id)"
          ></image>
          <!-- 名称，发布时间 -->
          <view class="right">
            <view class="name" v-if="data.user">{{ data.user.nick_name }}</view>
            <view class="gangg">{{ data.create_time }}</view>
          </view>
        </view>

        <!-- 关注 -->
        <view
          class="user_img_right"
          v-if="data.user && !data.user.is_guanzhu && !type"
          @click="subRegard"
        >
          <view>
            <u-icon size="17" name="plus" color="#EEEEEE"></u-icon>
          </view>
          <view class="btn_text">关注</view>
        </view>
        <view
          class="user_img_right_false"
          v-if="data.user && data.user.is_guanzhu && !type"
          @click="subRegard"
        >
          <view class="btn_text_false">已关注</view>
        </view>
        <view
          class="user_img_right_icon"
          @click="showMod = true"
          v-show="type == 'my'"
        >
          <u-icon size="25" name="trash" color="#888888"></u-icon>
        </view>
      </view>

      <view class="all_detail">
        <!-- 预览遮罩层 -->
        <view
          class="Preview_model"
          @click="goMember"
          v-if="my_level_id < data.grade_auth"
        >
          该内容仅支持{{
            data.grade_auth == 1
              ? "元气驿站"
              : data.grade_auth == 2
              ? "启初梦谷"
              : data.grade_auth == 3
              ? "青空天台"
              : data.grade_auth == 4
              ? "无极云顶"
              : data.grade_auth == 5
              ? "返朴归源"
              : ""
          }}及以上行者查看
        </view>

        <view class="box_title" v-if="data.title">{{
          detailType == "wen" ? data.name : data.title
        }}</view>
        <!-- 内容 -->
        <view class="box_details" v-html="data.content"></view>
        <!-- 图片 -->
        <view
          v-if="data.file"
          class="jiugong"
          :class="
            data.file.length == 1
              ? 'jiugong1'
              : data.file.length == 4
              ? 'jiugong4'
              : ''
          "
        >
          <view
            class="jiugong_img"
            v-for="(itemValue, index) in data.file"
            :key="index"
            @click.stop="goPreview(itemValue, data.file, index)"
          >
            <!-- 图片展示图 -->
            <image
              :src="itemValue.url"
              v-if="itemValue.file_type == 10"
              class="jiugong_img_show"
            ></image>
            <!-- 视频展示图 -->
            <image
              class="jiugong_img_show"
              :src="itemValue.url_img"
              v-if="itemValue.file_type == 30"
            >
            </image>
            <!-- 遮罩层 -->
            <view class="jiugong_img_mask" v-if="itemValue.file_type == 30">
              <view class="video_cover_play">
                <image src="@/static/images/icon_dtym_bofang.png"></image>
              </view>
            </view>
          </view>
        </view>

        <!-- 语音 -->
        <template v-if="data.file_audio && data.file_audio.length > 0">
          <com-audio
		    ref="bigfly"
            :src="data.file_audio[0]"
            class="yuyin_mod"
            :color="'rgba(0,0,0,0.9)'"
          ></com-audio>
        </template>

        <view class="display_view">
          <view
            class="keywords"
            v-if="
              (detailType == 'myjiazu' || detailType == 'myjiaxiang') &&
              data.p_name
            "
            >#{{ data.p_name }}
          </view>
          <view class="display_way" v-if="type == 'my'">{{
            data.status == 0 ? "公开" : data.status == 1 ? "粉丝" : "自己"
          }}</view>
        </view>

        <!-- 文心岛目录入口 -->
        <view v-if="this.detailType == 'wen'">
          <u-button class="custom-style" text="回到目录" @click="goCatalogue"></u-button>
        </view>
      </view>
    </view>

    <!-- 评论 -->
    <!-- <view style="width: 100%;padding: 0 30rpx;box-sizing: border-box;background: #fff;">
			
		</view> -->

    <view class="comment">
      <view class="comment_top">
        <view class="ping" @click="showLimits = true"> 评论({{ total }}) </view>
        <view class="zan"> 赞 {{ data.like_count }} </view>
      </view>
      <!-- <view class="comment_item">
				<view class="comment_item_top">
					<view class="comment_item_top_img">
						<image src="/static/images/pic_yt_xingzhegushi_one.png" mode=""></image>
					</view>
					<view class="comment_item_top_text">
						<view class="comment_item_top_text_name">邬东东</view>
						<view class="comment_item_top_text_str">评论评论评论评论评论评论评论评论评论</view>
						<view class="comment_item_top_text_other">
							<view class="other_time">1小时前 回复</view>
							<view class="other_num">
								<u-icon name="thumb-up"></u-icon>
								4779
							</view>
						</view>
					</view>
				</view>
			</view> -->
      <view
        style="
          width: 100%;
          padding: 0 30rpx;
          box-sizing: border-box;
          position: relative;
        "
      >
        <reviewContent
          ref="review"
          :reply="reply"
          :reply_one="reply"
          v-for="(item, index) in list"
          :value="item"
          :id="currentId"
          :type="collectType"
          :index="index"
          :my_level_id="my_level_id"
          @reply="handReply"
          @replyC="handReply1"
          @refresh="refresh"
        ></reviewContent>
      </view>
    </view>
    <view class="empty_view" v-if="list && list.length == 0">
      <image
        class="item_left_clickable"
        src="../../static/images/my/kong.png"
        mode=""
      ></image>
      <view>当前暂无内容~</view>
    </view>
    <view class="none_view"></view>
    <view class="zhezhao" v-if="isZhe" @click="zheColse"> </view>
    <!-- !focusKuwei -->
    <view class="btn_box" v-if="!focusKuwei || !isZhe">
      <view class="btn_box_ping" @click="openPl">
        <u-icon
          name="../../static/images/icon_tllb_taolun.png"
          size="20"
        ></u-icon>
        <text class="btn_box_text">评论</text>
      </view>
      <view class="btn_box_ping" @click="hanZan">
        <!-- <u-icon name="../../static/images/icon_sslgt_dianzan.png" size="20"></u-icon> -->
        <image
          class="zanImg1"
          v-show="data.is_like"
          src="@/static/images/slices/icon_tlzxq_dianzan_xuanzhong.png"
        ></image>
        <image
          class="zanImg1"
          v-show="!data.is_like"
          src="@/static/weichuang/icon_fld_dianzan.png"
        ></image>
        <text
          class="btn_box_text"
          :style="{ color: data.is_like ? '#55B877' : '' }"
          >赞</text
        >
      </view>
    </view>

    <view class="operate1" v-show="focusKuwei || isZhe">
      <scroll-view :scroll-top="99999" scroll-y="true" class="scroll-Y">
        <view class="operate_top">
          <view class="inp" style="width: 502rpx">
            <u--input
              :focus="focusKuwei"
              :placeholder="plsText"
              border="none"
              placeholderStyle="font-size:30rpx;color:#ADADAD;"
              color="#ADADAD"
              v-model="value"
              @change="change"
              inputAlign="left"
              @focus="focus"
              @blur="blur"
            ></u--input>
          </view>

          <view class="sending_btn" @click="send"> 发送 </view>
        </view>

        <view class="mod_img" v-if="fileType == 2 && isZhe">
          <image
            :src="item.preview_url"
            v-for="(item, index) in plImage"
          ></image>
        </view>
        <view
          style="width: 100%; padding: 0 50rpx 0 30rpx; box-sizing: border-box"
          v-if="fileType == 1 && isZhe"
        >
          <com-audio
		  ref="audio222"
            :showDelBtn="true"
            :src="plImage[0].preview_url"
          ></com-audio>
        </view>

        <view class="mod_icon" v-if="isZhe">
          <view class="check_image" @click.stop="current_icon = 0">
            <image src="@/static/images/icon_tlzxq_jianpan.png" mode=""></image>
          </view>
          <view class="check_image" @click.stop="current_icon = 1">
            <image src="@/static/images/icon_tlzxq_yuyin.png" mode=""></image>
          </view>
          <view class="check_image" @click.stop="uploadFile">
            <image src="@/static/images/icon_tlzxq_tupian.png" mode=""></image>
          </view>
        </view>

        <view class="mod_sound_btn" v-if="current_icon == 1 && isZhe">
          <view
            class="btn_view"
            @touchstart.stop="touchstart"
            @touchend.stop="touchend"
          >
            <text class="btn_view_time" v-show="!isTranscribe">00.000</text>
            <u-count-to
              v-show="isTranscribe"
              :autoplay="autoplay"
              ref="uCountTo"
              :startVal="0"
              :endVal="60"
              :decimals="3"
              :duration="60000"
              :useEasing="false"
              fontSize="48rpx"
              color="#fff"
            ></u-count-to>
            <!-- <view class="btn_view_time">{{ time }}</view> -->
            <view class="btn_view_text" v-if="!isTranscribe">{{ start }}</view>
            <view class="btn_view_text" v-if="isTranscribe">{{ end }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 删除弹框 -->
    <u-modal
      :show="showMod"
      :title="modTitle"
      width="540rpx"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @cancel="showMod = false"
      @close="showMod = false"
    >
      <view class="slot-content"> 确认删除此条内容？ </view>
    </u-modal>

    <!-- 解散弹框 -->
    <u-modal
      :show="showMod1"
      :title="modTitle1"
      width="540rpx"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm1"
      @cancel="showMod1 = false"
      @close="showMod1 = false"
    >
      <view class="slot-content"> 确认解散星球？ </view>
    </u-modal>

    <u-popup mode="center" :show="show1" @close="close1" @open="open1">
      <view class="pop_live">
        <view class="pop_live_title"> 请选择查看需要的行者权限 </view>
        <u-radio-group
          v-model="live"
          activeColor="rgb(85, 184, 119)"
          iconPlacement="right"
        >
          <view class="pop_live_box">
            <view
              class="pop_live_item"
              style="display: flex; align-items: center"
              @click="handLive(item.level_id)"
              v-for="(item, index) in liveList"
              :key="item.level_id"
            >
              <!-- 元气驿站 -->
              {{ item.level_name }}
              <u-radio :name="item.level_id"></u-radio>
            </view>
            <!-- <view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(2)">
						启初梦谷
						<u-radio :name="2"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(3)">
						青空天台
						<u-radio :name="3"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(4)">
						无极云顶
						<u-radio :name="4"></u-radio>
					</view>
					<view class="pop_live_item" style="display: flex;align-items: center;" @click="handLive(5)">
						返朴归源
						<u-radio :name="5"></u-radio>
					</view> -->

            <view class="pop_live_btn">
              <view class="live_btn" @click="liveColse"> 取消 </view>
              <view
                class="live_btn"
                style="background: rgb(85, 184, 119); color: #fff"
                @click="liveSubmit"
              >
                确定
              </view>
            </view>
          </view>
        </u-radio-group>
      </view>
    </u-popup>
	<floatingBall></floatingBall>
    <Share ref="refShare"></Share>
  </view>
</template>

<script>
import collect from "@/components/collect.vue"; // 收藏、
import Share from "@/components/share.vue"; // 分享
import {
  pinglun,
  huifu_weichuang,
  like_weichuang,
  pinglun_children,
} from "@/common/api/weichuang.js";
import {
  pinglunList,
  huifu,
  pinglunChildren,
  dianzan,
} from "@/common/api/jiazu.js";
import reviewContent from "@/pages/detail/reviewContent.vue"; //评论
import storage from "@/common/storage.js"; // 缓存封装
import config from "@/config"; // 配置文件
import getRecorderManager from "@/common/getRecorderManager.js";
import comAudio from "@/pages/components/audio.vue"; //语音条
export default {
  components: {
    collect,
    reviewContent,
    comAudio,
    Share,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      isRegard: false, // true已关注  false没关注
      list: [],
      data: {},
      showMod: false,
      showMod1: false,
      modTitle: "确认删除",
      modTitle1: "确认解散",
      type: "",
      pageUrl: "",
      redirectTo: false,
      collectType: 0,
      user_id: 0,
      from: "",
      detailType: "",
      currentId: "",
      title: "",
      focusKuwei: false,
      plsText: "写回复",
      value: "",
      toUserId: 0,
      replyId: 0,
      reply: true,
      total: 0,
      is_c: false,
      currentIndex: -1,
      current_icon: 0,
      plImage: [],
      fileType: 0, // 1音频  2视频
      isTranscribe: false,
      autoplay: false,
      start: "按住说话",
      end: "松开结束",
      isZhe: false,
      page: 1,
      my_level_id: 0,
      show1: false,
      live: 0,
      liveList: [],
    };
  },
  onShow: function () {
    console.log("App Show");
	this.list = [];
    if (this.detailType == "fei") {
      // 飞离洞详情
      this.getWeiDetail(1);
      this.collectType = 1;
      this.plList();
    } else if (this.detailType == "ling") {
      // 灵感塔详情
      this.getWeiDetail(2);
      this.collectType = 2;
      this.plList();
    } else if (this.detailType == "shi") {
      // 诗心园详情
      this.getWeiDetail(3);
      this.collectType = 3;
      this.plList();
    } else if (this.detailType == "wen") {
      // 文心岛详情
      this.getWeiDetail(4);
      this.collectType = 4;
      this.plList();
    } else if (this.detailType == "xing") {
      // 星云共创详情
      this.collectType = 7;
      this.getWeiDetail(7);
    } else if (this.detailType == "jiazu") {
      // 家族树详情
      this.collectType = 15;
      this.jiazuPlList();
      this.getJiaZu();
    } else if (this.detailType == "myjiazu") {
      this.collectType = 15;
      this.jiazuPlList();
      // 家族树详情
      this.getJiaZu();
    } else if (this.detailType == "myjiaxiang") {
      // 家乡详情
      this.collectType = 14;
      this.jiazuPlList();
      this.getJiaXiang();
    } else if (this.detailType == "youji") {
      this.getWeiDetail(6);
      this.plList();
      this.collectType = 6;
    }
  },
  onLoad(options) {
    this.currentId = options.currentId;
    this.title = options.title;
    this.detailType = options.detailType;
    this.type = options.type;
    this.redirectTo = options.redirectTo;
    this.pageUrl = storage.get("pageUrl", this.pageUrl);
    this.from = options.from;
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  onReachBottom() {
    console.log("this", this.total, this.list.length);
    if (this.total > this.list.length) {
      this.page += 1;
      this.plList();
    }
  },
  methods: {
    open1() {},
    close1() {
      this.show1 = false;
    },
    zheColse() {
      this.isZhe = false;
      this.fileType = 0;
      this.plImage = [];
      this.current_icon = 0;
    },
    // 跳目录页
    goCatalogue(){
      uni.navigateTo({
        url: `/pages/detail/wenList?user_id=${this.user_id}&name=${this.data.name}`,
      });
    },
    toBack() {
      // if (this.redirectTo) {
      //   uni.redirectTo({
      //     url: this.pageUrl,
      //   });
      // } else {
      if(this.data.file_audio && this.data.file_audio.length > 0){
        this.$refs.bigfly.bigFly3();
      }
      uni.navigateBack({
        delta: 1,
      });
      
      
      // }
    },
    refresh() {},
    plList() {
      pinglun({
        id: this.currentId,
        type: this.collectType,
        page: this.page,
      }).then((res) => {
        console.log("resssss", res);
        this.list.push(...res.data.list.data);
        this.total = res.data.list.total;
        
      });
    },
    jiazuPlList() {
      pinglunList({
        id: this.currentId,
        type: this.collectType,
        page: this.page,
      }).then((res) => {
        console.log("resssss", res);
        this.list = res.data.list.data;
        this.total = res.data.list.total;
      });
    },
    // 进个人主页
    goHome(user_id) {
      uni.navigateTo({
        url: `/pages/home/home?user_id=${user_id}`,
      });
    },
    // 关注按钮
    subRegard() {
      this.isRegard = !this.isRegard;
      this.$http
        .userGuanzhu({
          user_id: this.data.user.user_id,
        })
        .then((res) => {
          console.log(res, "关注");
          uni.$u.toast(res.message);
          setTimeout(() => {
            if (this.detailType == "fei") {
              // 飞离洞详情
              // this.getWeiDetail(1);
            }
            this.data.user.is_guanzhu = !this.data.user.is_guanzhu;
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    openPl() {
      console.log("wwwwwww", this.focusKuwei);
      this.focusKuwei = true;
    },
    change() {},
    // 跳会员页面
    goMember() {
      uni.navigateTo({
        url: `/pages/member/index`,
      });
    },
    goPreview(item, file, index) {
      console.log(item);
      if (item.file_type == 30) {
        console.log(111111, item);
        uni.navigateTo({
          url: `/components/preview?type=false&vimg=${item.url}`,
        });
      } else if (item.file_type == 10) {
        // console.log(222222222, item);
        // uni.navigateTo({
        //   url: `/components/preview?type=true&img=${item.url}`,
        // });

        let str = [];
        for (let i = 0; i < file.length; i++) {
          if (file[i].file_type == 10) {
            str.push(file[i].url);
          }
        }

        uni.previewImage({
          urls: str,
          current: item.url,
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {
              console.log(
                "选中了第" +
                  (data.tapIndex + 1) +
                  "个按钮,第" +
                  (data.index + 1) +
                  "张图片"
              );
            },
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      }
    },
    // 删除
    confirm() {
      if (this.detailType == "myjiaxiang") {
        this.deleteHome();
      } else if (this.detailType == "myjiazu") {
        this.deleteFamily();
      } else if (this.detailType == "fei") {
        this.deleteWeiChuang(1);
      } else if (this.detailType == "ling") {
        this.deleteWeiChuang(2);
      } else if (this.detailType == "shi") {
        this.deleteWeiChuang(3);
      } else if (this.detailType == "wen") {
        this.deleteWeiChuang(4);
      } else if (this.detailType == "youji") {
        this.deleteWeiChuang(6);
      }
      uni.$u.toast("确定啦");
      this.showMod = false;
    },
    confirm1() {
      uni.$u.toast("确定啦");
      this.showMod1 = false;
    },
    // 微创详情详情
    getWeiDetail(type) {
      this.$http
        .weichuangDetail({
          type: type,
          id: this.currentId,
        })
        .then((res) => {
          console.log(res, "微创详情");
          this.data = res.data.info;
          this.user_id = res.data.info.user.user_id;
          this.toUserId = res.data.info.user.user_id;
          this.my_level_id = res.data.my_level_id;
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 家族树详情
    getJiaZu() {
      this.$http
        .homeDetailFamily({
          id: this.currentId,
        })
        .then((res) => {
          console.log(res, "家族树详情");
          this.data = res.data.detail;
          this.user_id = res.data.detail.user.user_id;
          this.my_level_id = res.data.my_level_id;
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 家乡详情/故土恩详情
    getJiaXiang() {
      this.$http
        .homeDetail({
          id: this.currentId,
        })
        .then((res) => {
          console.log(res, "家乡详情");
          this.data = res.data.detail;
          this.user_id = res.data.detail.user.user_id;
          this.my_level_id = res.data.my_level_id;
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 家乡删除
    deleteHome() {
      this.$http
        .homeDeleteHome({
          id: this.currentId,
        })
        .then((res) => {
          console.log(res, "家乡删除");
          uni.$u.toast(res.message);
          setTimeout(() => {
            uni.redirectTo({
              url: this.pageUrl,
            });
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 家族删除
    deleteFamily() {
      this.$http
        .homeDeleteFamily({
          id: this.currentId,
        })
        .then((res) => {
          console.log(res, "家族删除");
          uni.$u.toast(res.message);
          setTimeout(() => {
            uni.redirectTo({
              url: this.pageUrl,
            });
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 微创删除
    deleteWeiChuang(num) {
      this.$http
        .weichuangDelete_weichuang({
          id: this.currentId,
          type: num,
        })
        .then((res) => {
          console.log(res, "微创删除");
          uni.$u.toast(res.message);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    handReply(val, index) {
      console.log("vallll222", val);
      this.plsText = "回复@ " + val.user.nick_name;
      this.replyId = val.id;
      this.toUserId = val.user.user_id;
      this.focusKuwei = true;
      this.is_c = true;
      this.currentIndex = index;
    },
    handReply1(val, item, index) {
      console.log("vallll222", val);
      this.plsText = "回复@ " + val.user.nick_name;
      this.replyId = item.id;
      this.toUserId = val.user.user_id;
      this.focusKuwei = true;
      this.is_c = true;
      this.currentIndex = index;
    },
    send() {
      console.log("33333333", this.data.user_id);
      this.$http.userLevelList({}).then((res) => {
        if (
          res.data.userInfo.is_teacher == 1 ||
          res.data.userInfo.is_senators == 1
        ) {
          this.show1 = true;
          console.log("reessssssliiive", res);
          this.liveList = res.data.list;
          this.liveList.unshift({
            level_name:'公开',
            level_id:0,
          })
        } else {
          this.huifu();
        }
      });
    },
    huifu(grade_auth = 0) {
      let file_id = 0;
      if (this.plImage.length) {
        file_id = this.plImage[0].file_id;
      }

      if (this.collectType == 14 || this.collectType == 15) {
        huifu({
          id: this.currentId,
          type: this.collectType,
          file_id,
          content: this.value,
          comment_id: this.replyId,
          comment_user_id: this.toUserId,
          user_id: this.data.user_id,
          grade_auth,
        }).then((res) => {
          console.log("ressss", res);
          this.replyId = 0;
          this.toUserId = this.data.user_id;
          this.value = "";
          this.isZhe = false;
          this.fileType = 0;
          this.current_icon = 0;
          this.plImage = [];
          if (this.is_c) {
            this.$refs.review[this.currentIndex].expand();
            this.is_c = false;
          }
          this.list = [];
          this.page = 1;
          this.jiazuPlList();
        });
      } else {
        huifu_weichuang({
          id: this.currentId,
          type: this.collectType,
          file_id,
          content: this.value,
          comment_id: this.replyId,
          comment_user_id: this.toUserId,
          user_id: this.data.user_id,
          grade_auth,
        }).then((res) => {
          console.log("ressss", res);
          this.replyId = 0;
          this.toUserId = this.data.user_id;
          this.value = "";
          this.isZhe = false;
          this.fileType = 0;
          this.current_icon = 0;
          this.plImage = [];
          if (this.is_c) {
            this.$refs.review[this.currentIndex].expand();
            this.is_c = false;
          }
          this.list = [];
          this.page = 1;
          this.plList();
        });
      }
    },
    hanZan() {
      let that = this;
      if (this.collectType == 14 || this.collectType == 15) {
        dianzan({
          id: this.currentId,
          type: this.collectType,
          comment_id: 0,
          user_id: this.data.user_id,
        }).then((res) => {
          console.log("this.data.is_like", this.data.is_like);
          if (this.data.is_like == 0) {
            this.data.is_like = 1;
          } else {
            this.data.is_like = 0;
            // this.data.like_count -= 1;
          }
        });
      } else {
        like_weichuang({
          id: this.currentId,
          type: this.collectType,
          comment_id: 0,
          user_id: this.data.user_id,
        }).then((res) => {
          if (this.data.is_like == 0) {
            this.data.is_like = 1;
          } else {
            this.data.is_like = 0;
            // this.data.like_count -= 1;
          }
        });
      }
    },
    change() {},
    focus() {
      this.isZhe = true;
    },
    blur() {
      setTimeout(() => {
        this.focusKuwei = false;
      }, 0);
      this.plsText = "写回复";
    },
    updateDetail() {
      if (this.detailType == "fei") {
        // 飞离洞详情
        this.getWeiDetail(1);
        this.collectType = 1;
      } else if (this.detailType == "ling") {
        // 灵感塔详情
        this.getWeiDetail(2);
        this.collectType = 2;
      } else if (this.detailType == "shi") {
        // 诗心园详情
        this.getWeiDetail(3);
        this.collectType = 3;
      } else if (this.detailType == "wen") {
        // 文心岛详情
        this.getWeiDetail(4);
        this.collectType = 4;
      } else if (this.detailType == "xing") {
        // 星云共创详情
        this.getWeiDetail(7);
        this.collectType = 7;
      } else if (this.detailType == "youji") {
        // 游记详情
        this.getWeiDetail(6);
        this.collectType = 6;
      }
    },

    touchstart() {
      console.log("2222");
      this.isTranscribe = true;
      getRecorderManager.startManager();
      this.$refs.uCountTo.start();
    },
    async touchend() {
      console.log("33333");
      this.isTranscribe = false;
      let that = this;
      let token = storage.get("token");
      const url = await getRecorderManager.stopManager();
      console.log("222222222", url);
      uni.uploadFile({
        url: config.uni_app_web_api_url + "/api/upload/audio", // 仅为示例，非真实的接口地址
        filePath: url,
        name: "file",
        formData: {
          user: "test",
        },
        header: {
          "Access-Token": token,
        },
        success: (res) => {
          const data = JSON.parse(res.data);

          console.log("resssssssss", data);
          that.plImage = [
            {
              file_id: data.data.fileInfo.file_id,
              preview_url: data.data.fileInfo.external_url,
            },
          ];
          that.fileType = 1;
        },
      });
    },
    uploadFile() {
      let token = storage.get("token");
      let that = this;
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function (res) {
          console.log(JSON.stringify(res.tempFilePaths));

          uni.uploadFile({
            url: config.uni_app_web_api_url + "/api/upload/image", // 仅为示例，非真实的接口地址
            filePath: res.tempFilePaths[0],
            name: "file",
            formData: {
              user: "test",
            },
            header: {
              "Access-Token": token,
            },
            success: (res) => {
              const data = JSON.parse(res.data);
              console.log("resssss", res, data.data.fileInfo);
              that.plImage = [
                {
                  file_id: data.data.fileInfo.file_id,
                  preview_url: data.data.fileInfo.preview_url,
                },
              ];
              that.fileType = 2;
            },
          });
        },
      });
    },
    handLive(live) {
      this.live = live;
    },
    liveColse() {
      this.show1 = false;
    },
    liveSubmit() {
      this.huifu(this.live);
      this.show1 = false;
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  background: #f0f2f5;
  box-sizing: border-box;

  .top {
    padding: 0 30rpx 30rpx 30rpx;
    background: #ffffff;
  }

  .comment {
    margin-top: 16rpx;
    background: #ffffff;

    .comment_top {
      display: flex;
      border-bottom: 1rpx solid #eeeeee;
      justify-content: space-between;
      align-items: center;

      .ping {
        padding: 24rpx 29rpx;
      }

      .zan {
        padding: 24rpx 29rpx;
      }
    }

    .comment_item {
      padding: 32rpx 30rpx;

      .comment_item_top {
        width: 100%;
        display: flex;

        .comment_item_top_img {
          width: 88rpx;

          image {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
          }
        }

        .comment_item_top_text {
          margin-left: 12rpx;
          flex: 1;
          border-bottom: 1rpx solid #eeeeee;
          padding-bottom: 35rpx;

          .comment_item_top_text_name {
            color: #888888;
            font-size: 24rpx;
          }

          .comment_item_top_text_str {
            color: #444444;
            font-size: 30rpx;
            margin-top: 4rpx;
          }

          .comment_item_top_text_other {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 11rpx;

            .other_time {
              font-size: 24rpx;
              color: #888888;
            }

            .other_num {
              display: flex;
              font-size: 24rpx;
              color: #888888;
            }
          }
        }
      }
    }
  }

  .none_view {
    height: 1rpx;
    margin-top: 100rpx;
  }

  .btn_box {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 24rpx 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);

    .btn_box_ping {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1rpx solid #eeeeee;

      .zanImg1 {
        width: 38rpx;
        height: 40rpx;
      }

      .btn_box_text {
        font-size: 30rpx;
        color: #888888;
        margin-left: 12rpx;
      }
    }
  }

  .slot-content {
    color: #666666;
  }
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title_left {
    display: flex;

    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .right {
      margin-top: 8rpx;
      margin-left: 24rpx;

      .name {
        font-size: 32rpx;
        line-height: 42rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888;
      }

      .gangg {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #888;
      }
    }
  }

  .user_img_right {
    width: 180rpx;
    height: 64rpx;
    background: #55b877;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn_text {
      margin-left: 11rpx;
      font-size: 28rpx;
      color: #eeeeee;
    }
  }

  .user_img_right_false {
    width: 180rpx;
    height: 64rpx;
    background: rgba(173, 173, 173, 0.102);
    border: 1rpx solid #adadad;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn_text_false {
      margin-left: 11rpx;
      font-size: 28rpx;
      color: #adadad;
    }
  }

  .user_img_right_icon {
  }
}

.all_detail {
  position: relative;
  overflow: hidden;
}

.Preview_model {
  height: 100%;
  background: linear-gradient(360deg, #ffffff 87%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  position: absolute;
  top: 50rpx;
  z-index: 10;
  text-align: center;
  line-height: 100rpx;
  // box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(255, 255, 255, 0.6);
}

.box_title {
  font-size: 34rpx;
  margin-top: 40rpx;
}

.box_details {
  // margin-top: 24rpx;
  font-size: 28rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 60rpx;
  font-size: 30rpx;
  margin-top: 30rpx;
}

.jiugong {
  // width: 456rpx;
  margin-top: 32rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .jiugong_img {
    width: 222rpx;
    height: 222rpx;
    margin-right: 12rpx;
    margin-bottom: 12rpx;
    position: relative;

    .jiugong_img_mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(1, 1, 1, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;

      .video_cover_play {
        width: 80rpx;
        height: 80rpx;

        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }

    .jiugong_img_show {
      width: 222rpx;
      height: 222rpx;
    }
  }

  image {
    width: 222rpx;
    height: 222rpx;
  }

  .jiugong_img:nth-child(3n) {
    margin-right: 0;
  }
}

.jiugong1 {
  width: 400rpx;

  image {
    width: 400rpx;
  }
}

.jiugong4 {
  width: 460rpx;

  .jiugong_img:nth-child(3n) {
    margin-right: 12rpx;
  }

  .jiugong_img:nth-child(2n) {
    margin-right: 0;
  }
}

.yuyin_mod {
  margin-top: 32rpx;
}

.display_view {
  display: flex;
  align-items: center;
  padding: 24rpx 0;

  .keywords {
    color: #55b877;
    font-size: 28rpx;
  }

  .display_way {
    font-size: 28rpx;
    color: #888888;
    margin-left: 24rpx;
  }
}

.zanPing {
  display: flex;
  width: 100%;
  height: 110rpx;
  justify-content: space-between;

  .zan {
    display: flex;

    .zanBtn {
      display: flex;
      align-items: center;

      .zanImg {
        width: 40rpx;
        height: 40rpx;
      }

      .zanFont {
        margin: 0 10rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        color: #888;
      }
    }
  }
}

.commentInput {
  // background-color: rgba(39,44,41,0.5);
  // border-color: rgba(39,44,41,0.1)!important;
  background: #f4f4f4;
  border-color: #f4f4f4 !important;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.operate1 {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
  padding: 16rpx 30rpx 16rpx 20rpx;
  box-sizing: border-box;
  z-index: 1000;

  .operate_top {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .mod_img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 16rpx 30rpx;

    image {
      width: 222rpx;
      height: 222rpx;
      margin-bottom: 12rpx;
      margin-right: 12rpx;
    }

    image:nth-child(3n) {
      margin-right: 0;
    }
  }

  .mod_icon {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #e5e5e5;
    margin-bottom: 38rpx;

    .check_image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 28rpx;

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .mod_icon_item {
      margin-right: 32rpx;
    }
  }

  .mod_sound_btn {
    padding: 106rpx 227rpx;

    .btn_view {
      width: 296rpx;
      height: 296rpx;
      background-image: url("@/static/images/pic_cjwc_luzhi.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;

      .btn_view_time {
        color: #ffffff;
        font-size: 46rpx;
      }

      .btn_view_text {
        color: #ffffff;
        font-size: 26rpx;
        margin-top: 4rpx;
      }
    }
  }

  .inp {
    height: 80rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
  }

  .sending_btn {
    width: 172rpx;
    height: 80rpx;
    background: #55b877;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 16rpx;
  }
}

.empty_view {
  margin-top: 100rpx;
  padding-bottom: 120rpx;

  image {
    margin: 0 auto;
    width: 410rpx;
    height: 410rpx;
  }

  view {
    font-size: 30rpx;
    color: #d8d8d8;
    text-align: center;
  }
}

.zhezhao {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 186;
}

.pop_live {
  width: 570rpx;
  // height: 830rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;

  .pop_live_title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #666666;
    padding: 30rpx;
    box-sizing: border-box;
  }

  .pop_live_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    box-sizing: border-box;

    .pop_live_item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #ccc;
      padding: 30rpx 0;
      box-sizing: border-box;
    }
  }

  .pop_live_btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28rpx;
    margin-bottom: 28rpx;

    .live_btn {
      width: 46%;
      height: 80rpx;
      border-radius: 24rpx;
      border: 1rpx solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.custom-style {
		color: #55b877;
		width: 400rpx;
    border-color: #55b877;
	}
</style>